<template>
    <ActivityPhonePreview>
        <div class="phone_box">
            <div class="header">
                <!-- <el-icon>
            <close-bold />
          </el-icon> -->
                <h3 v-if="state.activity_name">{{ state.activity_name }}</h3>
                <h3 v-else>活动标题</h3>
            </div>
            <div class="info_box">
                <el-avatar class="avatar"> </el-avatar>
                <ol style="margin-left: -107px; color: #fff">
                    用户昵称
                </ol>
                <span>助力记录</span>
            </div>
            <div class="content">
                <div v-if="state.period_type == 1" class="content_time">
                    <span>有效期：永久</span>
                </div>
                <div v-else class="content_time">
                    <span>有效期：{{ onTime(state.effect_date) }}</span>
                </div>
                <div class="content_title">
                    <h5 style="margin-bottom: 36px; color: #774a1c">
                        已有123人助力，还差<span style="color: #ff6b00">124</span>人可领取奖励
                    </h5>
                    <div class="jindutiao_box">
                        <div class="jindutiao_1">
                            <div class="jindutiao_1_1">
                                <div class="jindutiao_1_1_1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="baifenbi"><span>0</span> <span>100</span> <span>300</span> <span>400</span></div>
                    <div class="yaoqing_btn">邀请好友助力</div>
                </div>
                <div class="content_footer">
                    <el-tabs class="tabs_box">
                        <el-tab-pane label="奖励列表">
                            <div v-for="item in state.reward_list" :key="item.step" class="content_prize">
                                <el-image class="image_box" :src="item.reward_image" fit="cover">
                                    <template #error>
                                        <div>
                                            <el-icon>
                                                <icon-picture />
                                            </el-icon>
                                        </div>
                                    </template>
                                </el-image>
                                <div class="left_text">
                                    <div class="title zw-text-ellipsis">
                                        {{ item.reward_title }}
                                    </div>
                                    <div class="num">{{ item.help_num }}人</div>
                                </div>
                                <div class="right">已领取</div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="排行榜">
                            <div v-for="i in 1" :key="i" class="content_prize">
                                <el-avatar class="avatar"> user </el-avatar>
                                <div class="content_prize_text" style="margin-left: -192px">王燕子</div>
                                <div style="color: #774a1c; font-size: 12px">
                                    已助力<span style="color: #ff6b00">73</span>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </ActivityPhonePreview>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import bus from '@/utils/bus';
import ActivityPhonePreview from '../index.vue';

const state = ref({
    activity_name: '', // 活动标题
    group_id: 0, // 活动分组
    period_type: 1, // 活动有效期 1-固定 2-永久
    effect_date: [], //  有效期
    reward_list: [
        {
            step: 1, // 任务层级
            help_num: 0, // 助力人数
            reward_type: 1, // 奖品类型 1-实物 2-红包
            reward_image: '', // 图片
            reward_desc: '', // 描述
            reward_stock: 1, // 库存
            red_envelope_type: 1, // 红包类型
            red_envelope_num: 0, // 个数
            red_envelope_money: 0, //  金额
            red_envelope_range: 0, //  金额
            red_envelope_total: 0 //  总金额
        }
    ]
});

const onTime = (v: any) => {
    return v?.length ? `${v[0]}—${v[1]}` : '';
};

bus.on('one', (data: any) => {
    state.value.activity_name = data.activity_name;
    state.value.period_type = data.period_type;
    state.value.effect_date = data.effect_date;
});

bus.on('three', (data: any) => {
    state.value.reward_list = data;
});
</script>
<style lang="scss" scoped>
.activity-phone-preview-wrap {
    height: fit-content;
    :deep(.el-scrollbar__view) {
        height: 100%;
    }
}
.tabs_box {
    :deep(.el-tabs__nav) {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    :deep(.el-tabs__item) {
        font-size: 14px;
    }
    :deep(.el-tabs__content) {
        border-radius: 0 0 25px 25px;
    }
}
.phone_box {
    width: 100%;
    height: 100%;
    background-color: #fff5e9;
    font-family: STHeitiSC-Medium, STHeitiSC;

    .header {
        background: #ffffff;
        border-radius: 1px;
        border-bottom: 1px solid #f5f5f5;
        position: relative;
        text-align: center;
        font-size: 16px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #000000;
        height: 42px;
        line-height: 44px;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        width: 100%;
        z-index: 1;
    }

    .info_box {
        height: 104px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: url('@/assets/smartMarketing/oval.png') no-repeat;
        background-size: cover;
        margin-top: 42px;
        .avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background-color: #fff;
        }
        span {
            padding: 3px 5px;
            border-radius: 24px;
            color: #ff6b00;
            background-color: #fff3ba;
            font-size: 12px;
        }
    }

    .content {
        margin-top: -14px;
        justify-content: center;
        padding: 0 8px 11px;
        border-radius: 10px 10px 4px 4px;
        background-color: #fff5e9;
        font-size: 10px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        overflow: hidden;
        .content_time {
            margin: 0 auto;
            margin-bottom: 9px;
            text-align: center;
            font-size: 12px;
            color: #774a1c;
            line-height: 20px;
            span {
                display: inline-block;
                padding: 0 14px;
                border-radius: 0px 0px 18px 18px;
                background-color: #fff;
            }
        }
        .content_title {
            padding: 20px 20px 24px;
            border-radius: 8px;
            color: #774a1c;
            background-color: #fff;
            .jindutiao_box {
                height: 10px;
                border-radius: 10px;
                background-color: #ffe2bf;
                .jindutiao_1 {
                    width: 90px;
                    border-radius: 10px;
                    height: 10px;
                    background-color: #ff6b00;
                    position: relative;
                    .jindutiao_1_1 {
                        width: 12.5px;
                        height: 12.5px;
                        margin-bottom: 11px;
                        position: absolute;
                        left: 70px;
                        top: -1px;
                        border-radius: 50%;
                        background-color: #ffdb55;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .jindutiao_1_1_1 {
                            width: 10px;
                            height: 10px;
                            background-color: #ff6b00;
                            border-radius: 50%;
                        }
                    }
                }
            }
            .baifenbi {
                display: flex;
                justify-content: space-between;
                margin: 5px 0 36px;
                span {
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    color: #969696;
                }
            }
            .yaoqing_btn {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 24px;
                line-height: 36px;
                color: #ffffff;
                font-size: 10px;
                background-color: #ff6b00;
            }
        }
        .content_footer {
            margin-top: 20px;
            max-height: 360px;
            border-radius: 8px;
            color: #774a1c;
            background-color: #ffffff;
            :deep(.el-tabs__header) {
                background: #ffe2bf;
                border-radius: 8px 8px 0px 0px;
            }
            :deep(.el-tabs__nav-wrap::after) {
                height: 0px;
            }
            .content_prize {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 0;
                margin: 0 8px;
                line-height: 10px;
                background-color: #fff;
                border-bottom: 2px solid #f5f5f5;

                .content_prize_text {
                    font-size: 10px;
                    line-height: 26px;
                    margin-left: -127px;
                }
                .left_text {
                    margin-top: 5px;
                    width: 60%;
                    .title {
                        height: 15px;
                    }
                }
                .right {
                    width: 68px;
                    height: 28px;
                    line-height: 26px;
                    font-size: 12px;
                    display: flex;
                    border-radius: 4px;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    background-color: #cccccc;
                }
            }
        }
    }
    .image_box {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        margin-right: 10px;
        font-size: 36px;
    }
}
</style>
